今天要寫的主題是背景漂浮泡泡的效果
動畫的寫法跟 飄移雲朵該篇的概念幾乎相同 只差元件是做 Y 軸位移
一樣把基本架構寫好

<ul class="bubble">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

然後寫基本的css
這邊應用到 **transform:translateZ(0);**是一個提升動畫性能的小技巧
詳情可以看
使用translateZ(0)提升性能的原理是什么？

body{
  background:#89b6d3;
  overflow:hidden;
  z-index:1;
}

.bubble{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  /*z-index defult value=1*/
  z-index:0;
  /*upgrade gpu rendering*/
  transform:translateZ(0);
}

.bubble li{
  position:absolute;
  list-style:none;
  display:block;
  background:rgba(255,255,255,0.2);
  /*make bubble on page bottom*/
  bottom:-100px; 
  animation:bubble-ani 20s linear infinite;
  border-radius:100%;
}

/* glow of the bubbles*/
.bubble li:before {
    position: absolute;
    left: 20%;
    top: 21%;
    width: 25%;
    content: '';
    background: rgba(255,255,255,0.2);
    display: block;
    height: 25%;
    border-radius: 100%;
}

.bubble li:nth-child(1){
  width:20px;
  height:20px;
  left:15%;
}

.bubble li:nth-child(2){
  width:40px;
  height:40px;
  left:40%;
  /*在元素裡增加動畫的延遲時間跟速度*/
  animation-duration:13s;
  animation-delay:2s;
}

.bubble li:nth-child(3){
  width:25px;
  height:25px;
  left:30%;
  /*在元素裡增加動畫的延遲時間跟速度*/
  animation-duration:18s;
  animation-delay:3.5s;
}

.bubble li:nth-child(4){
  width:60px;
  height:60px;
  left:55%;
  /*在元素裡增加動畫的延遲時間跟速度*/
  animation-duration:23s;
  animation-delay:1.5s;
}

.bubble li:nth-child(5){
  width:20px;
  height:20px;
  left:35%;
  /*在元素裡增加動畫的延遲時間跟速度*/
  animation-duration:16s;
  animation-delay:2s;
}

然後針對動畫部分寫 Y 軸的位移，如下

@keyframes bubble-ani {
  0%{
    -webkit-transform:translateY(0);
    transform:translateY(0);
  }
  100%{
    -webkit-transform:translateY(-1080px);
    transform:translateY(-1080px);
  }
}

到這邊就完成了 背景漂浮泡泡的效果
一樣附上本次的 codepen 如下
https://codepen.io/UHU/pen/OBwajz